<template>
  <div class="w-100 h-100 d-flex">
    <div class="left h-100" style="flex: 1; width: 0">
      <div id="ysytqk" style="width: 100%; height: 100%"></div>
    </div>
    <div
      class="right h-100"
      style="
        width: 624px;
        display: flex;
        justify-content: center;
        align-items: center;
      "
    >
      <fakeLenfend
        style="
          width: 100%;
          height: 90%;
          flex-flow: row wrap;
          justify-content: left;
          height: auto;
        "
        :color="list.map((item: any) => item.itemStyle.color)"
        :text="list.map((item:any) => item.name)"
        :colorBlock="true"
        class="fakelenfend"
      >
      </fakeLenfend>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import fakeLenfend from "@/components/project/fakeLegend.vue";
import { useOptions } from "@/hook/useOptions";

function generateData(totalNum, bigvalue, smallvalue, color) {
  let dataArr = [];
  for (var i = 0; i < totalNum; i++) {
    if (i % 2 === 0) {
      dataArr.push({
        name: (i + 1).toString(),
        value: bigvalue,
        itemStyle: {
          normal: {
            color: color,
            borderWidth: 0,
          },
        },
      });
    } else {
      dataArr.push({
        name: (i + 1).toString(),
        value: smallvalue,
        itemStyle: {
          normal: {
            color: "rgb(0,0,0,0)",
            borderWidth: 0,
          },
        },
      });
    }
  }
  return dataArr;
}
let threeData = generateData(10, 40, 10, "#5CE1FF");
let startAngle = 50; // 初始旋转角度

const option = {
  tooltip: {
    backgroundColor: "rgba(28,64,81,0.7)",
    textStyle: {
      color: "white",
      fontSize: 20,
    },
    borderColor: "transparent",

  },
  title: [
    {
      text: "",
      x: "center",
      y: "42%",
      textStyle: {
        fontSize: 24,
        fontWeight: "normal",
        color: "#fff",
      },
    },
    {
      text: "工程总数",
      x: "center",
      y: "52%",
      textStyle: {
        fontSize: 20,
        fontWeight: "normal",
        color: "#fff",
      },
    },
  ],

  series: [
    {
      name: "",
      type: "pie",
      clockWise: true,
      hoverAnimation: false,
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      radius: ["40%", "50%"],
      center: ["50%", "50%"],
      data: [],
    },
    {
      type: "pie",
      name: "旋转圆",
      zlevel: 20,
      silent: true,
      radius: ["57%", "56%"],
      hoverAnimation: false,
      startAngle: startAngle,
      data: threeData,
      label: {
        normal: {
          show: false,
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
    },
  ],
};

let myChart: any;

onMounted(() => {
  myChart = echarts.init(document.getElementById("ysytqk") as HTMLElement);
  myChart.setOption(option);
});

const colors = useOptions().colorList;

const dataList = useOptions().hanyangSubdistricts.value.map(
  (item: any, index: number) => ({
    name: item,
    color: colors[index],
  })
);

const props = defineProps({
  year: {
    default: 2024,
  },
});

const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [];
  try {
    data = jsonData.value.underJsc.rfgcsl[props.year];
  } catch (error) {}

  return data;
});

const list = ref([]);
const allCount = ref(0);

watch(
  () => current.value,
  (val) => {
    if (val) {
      allCount.value = val.reduce((pre: number, cur: number) => pre + cur);

      const data = val.map((value: any, index: number) => ({
        ...dataList[index],
        value,
        itemStyle: {
          color: dataList[index].color,
        },
      }));
      list.value = data;
      console.log(data);

      myChart.setOption({
        title: [
          {
            text: allCount.value + "个",
          },
        ],
        series: [{ data }],
      });
    }
  }
);
</script>

<style scoped lang="less">
.fakelenfend {
  :deep(.legend){
    width: 200px;
    margin-bottom: 20px;
  }
}
</style>
